body {
  height: 100vh;
  margin: 0;
}
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  .list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 400px;
    &:hover {
      .title {
        transition: none;
        color: #333;
      }
      .sumary {
        height: 0;
        transition: none;
      }
      .item::before {
        transition: none;
        opacity: 0;
      }
    }
    .item {
      position: relative;
      padding: 10px 10px 10px 34px;
      cursor: pointer;
      counter-increment: num;
      &:hover {
        .title {
          color: rebeccapurple;
          transition: none;
        }
        .sumary {
          height: 40px;
          transition: none;
        }
        &::before {
          opacity: 1;
          transition: none;
        }
      }
      &::before,
      .sumary,
      .title {
        transition: 0s 9999s;
      }
      &:first-child {
        .sumary {
          height: 40px;
        }
        .title {
          color: rebeccapurple;
        }
        &::before {
          opacity: 1;
        }
      }
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 8px;
        opacity: 0;
        z-index: -1;
        background: linear-gradient(
          270deg,
          rgb(241, 236, 249) 0%,
          rgba(241, 236, 249, 0) 100%
        );
      }
      .title {
        margin: 0;
        padding: 0;
        font-weight: normal;
        &::before {
          content: counter(num) " ";
          width: 25px;
          line-height: 30px;
          text-align: center;
          color: #fff;
          position: absolute;
          font-size: 14px;
          font-family: fantasy;
          left: 4px;
          background: center / 100% 100%
            url();
        }
      }
      .sumary {
        margin: 0;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        color: #666;
        font-size: 14px;
        height: 0;
      }
    }
  }
}
